---
title: Tooltip
description: Small, contextual information on hover/focus.
---

<LiveComponent language="tsx">
{`
  import { Tooltip, TooltipTrigger, TooltipContent } from "@pipecat-ai/voice-ui-kit";

  <Tooltip>
    <TooltipTrigger>
      Hover me!
    </TooltipTrigger>
    <TooltipContent>Helper text</TooltipContent>
  </Tooltip>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    Tooltip: {
      description: "Tooltip root component (wraps Radix Tooltip Root)",
      type: "React.ComponentProps<typeof TooltipPrimitive.Root>",
      required: false,
      default: "{}",
    },
    TooltipTrigger: {
      description: "Element that triggers the tooltip",
      type: "React.ComponentProps<typeof TooltipPrimitive.Trigger>",
      required: false,
      default: "{}",
    },
    TooltipContent: {
      description: "The tooltip content",
      type: "React.ComponentProps<typeof TooltipPrimitive.Content>",
      required: false,
      default: '{ sideOffset: 0 }',
    },
  }}
/>


